<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab切换</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #app {
        height: 300px;
        background-color: gainsboro;
        box-sizing: content-box;
    }

    ul {
        width: 20%;
        float: left;
    }

    li {
        text-align: center;
        height: 100px;
        line-height: 100px;
        cursor: pointer;
    }

    .div1 {
        width: 80%;
        background-color: orangered;
        height: 300px;
        float: left;
    }

    .one0 {
        background-color: rgb(224, 240, 9);
    }

    .two0 {
        background-color: rgb(224, 240, 9);
    }

    .three0 {
        background-color: rgb(224, 240, 9);
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="app">
        <ul>
            <li @click='array' :class='one'>循环数组</li>
            <li @click='obj' :class='two'>循环对象</li>
            <li @click='number' :class='three'>循环数字</li>
        </ul>
        <div class="div1">
            <div class="right1" v-if='start == 0'>
                <div v-for='data in list'>
                    {{data.name}} --- {{data.id}}
                </div>
            </div>
            <div class="right2" v-if='start == 1'>
                <div v-for='(value,key) in obj0'>
                    {{value}} --- {{key}}}
                </div>
            </div>
            <div class="right3" v-if='start == 2'>
                <div v-for='i in 5'>
                    {{num}}
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            start: 0,
            // 改变颜色
            one: {
                one0: false,
            },
            two: {
                two0: false,
            },
            three: {
                three0: false
            },
            // 循环数组
            list: [{
                id: 1,
                name: 'vue课件'
            }, {
                id: 2,
                name: 'react课件'
            }, {
                id: 3,
                name: 'js课件'
            }],
            // 循环对象
            obj0: {
                name: "来根华子！！！",
                hobby: '抽华子，抽别的咳嗽！',
                other: '街溜子！'
            },
            // 循环数字
            num: '123'
        },
        methods: {
            array() {
                this.one.one0 = !this.one.one0
                this.start = 0
            },
            obj() {
                this.two.two0 = !this.two.two0
                // this.one.one0 = !this.one.one0
                this.start = 1
            },
            number() {
                this.three.three0 = !this.three.three0
                // this.one.one0 = !this.one.one0
                this.start = 2
            }
        }
    })
</script>

</html>